<template>
	<a-card style="margin: -15px">
		<!--创作者查询条件-->
		<a-row style="margin-bottom: 1rem">
			<!--放置搜索条件-->
			<a-col :span="3">
				<a-select
					ref="select"
					v-model:value="this.page.status"
					style="width: 80px;margin-top: 4px"
					@focus="focus"
					@change="handleChanges"
					placeholder="状态"
				>
					<a-select-option value="0">禁用</a-select-option>
					<a-select-option value="1">启用</a-select-option>
					<a-select-option value="">全部</a-select-option>
				</a-select>
			</a-col>
			<a-col :span="6">
				<a-input-search
					v-model:value=this.page.keyword
					placeholder="搜索关键字"
					enter-button="搜索"
					size="large"
					@search="onSearch"
				/>
			</a-col>
			<a-col :push=this.number :span="3">

				<a-button type="primary" style="width: 90px;height: 40px" @click="addAuther">
					<PlusOutlined/>
					添加
				</a-button>
			</a-col>

		</a-row>
		<!--创作者列表-->
		<a-row style="margin-bottom: 1rem">
			<a-col :span="24">
				<a-table :columns="columns" :data-source="data" :pagination="false">

					<template #bodyCell="{ column, record }">
						<template v-if="column.key === 'photo'">
							<a-avatar :size="64" :src=record.uuidPhoto>
								<template #icon>
									<UserOutlined/>
								</template>
							</a-avatar>
						</template>
						<template v-if="column.key === 'action'">
           <span v-if="record.status==0">
            <a-dropdown>
      <template #overlay>
        <a-menu>
          <a-menu-item key="3" @click="update(record.id)">修改</a-menu-item>
          <a-menu-item key="4" @click="getAuthor(record.id)">查看</a-menu-item>
          <a-menu-item key="5" @click="del(record.id)">删除</a-menu-item>
          <a-menu-item key="7" @click="start(record.id)">启用</a-menu-item>
        </a-menu>
      </template>
      <a-button>
        操作
        <DownOutlined/>
      </a-button>
    </a-dropdown>
           </span>
							<span v-if="record.status==1">
            <a-dropdown>
      <template #overlay>
        <a-menu>
          <a-menu-item key="4" @click="getAuthor(record.id)">查看</a-menu-item>
          <a-menu-item key="6" @click="dis(record.id)">禁用</a-menu-item>
        </a-menu>
      </template>
      <a-button>
        操作
        <DownOutlined/>
      </a-button>
    </a-dropdown>
           </span>

						</template>
						<template v-if="column.key === 'status'">
							<a-tag v-if="record.status==0" :bordered="false" color="default">禁用</a-tag>
							<a-tag v-if="record.status==1" :bordered="false" color="success">启用</a-tag>
						</template>
						<template v-if="column.key ==='updateTime'">
							<span v-if="record.updateTime==null">未修改</span>
						</template>
					</template>
				</a-table>
			</a-col>
		</a-row>
		<!--分页组件-->
		<a-flex justify="flex-end">
			<a-pagination
				size="small"
				@change="onChange"
				show-size-changer
				:pageSizeOptions="['5','10','20','50','100']"
				v-model:current="this.page.pageNo"
				v-model:page-size="this.page.pageSize"
				:total="this.page.total"
				:show-total="(total, range) => `${range[0]}-${range[1]} 共 ${total} 条`"/>
		</a-flex>
	</a-card>
	<!--  修改抽屉-->
	<a-drawer
		title="编辑创作者"
		:width="400"
		:open="updateOpen"
		:body-style="{ paddingBottom: '80px' }"
		:footer-style="{ textAlign: 'right' }"
		@close="onClose"
	>
		<template #extra>
			<a-button style="margin-right: 8px" @click="onClose()">取消</a-button>
			<a-button type="primary" @click="editAuthor()">保存</a-button>
		</template>

		<!--修改的表单-->
		<a-form :model="authorDcInfoUpdate" ref="formRef" layout="vertical">
			<!--创作者头像-->
			<a-row :gutter="16">
				<a-col :span="16">
					<a-form-item ref="photo" label="头像:" name="photo">
						<a-upload
							:beforeUpload="beforeUpload"
							:customRequest="onUpload"
							:max-count="1"
							:show-upload-list="true"
							class="avatar-uploader"
							list-type="picture-card"
							name="avatar"
							@change="editCustomRequestMinio"
							:file-list="fileList">
							<div>
								<PlusOutlined/>
							</div>
						</a-upload>
					</a-form-item>
				</a-col>
			</a-row>

			<!--创作者名称-->
			<a-row :gutter="16">
				<a-col :span="16">
					<a-form-item
						label="创作者名称:"
						name="name"
						:rules="[{ required: true, message: '创作者名称不能为空!' },{min: 1,max:125, message: '您填写的创作者名称过长'}]"
					>
						<a-input v-model:value="authorDcInfoUpdate.name" placeholder="请填写创作者名称"/>
					</a-form-item>
				</a-col>
			</a-row>

			<!--创作者简介-->
			<a-row :gutter="16">
				<a-col :span="16">
					<a-form-item ref="remark" label="简介:" name="remark">
						<a-textarea :rows="4" v-model:value="authorDcInfoUpdate.remark"/>
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>

	</a-drawer>
	<!--  添加抽屉-->
	<a-drawer
		title="添加创作者"
		:width="400"
		:open="addOpen"
		:body-style="{ paddingBottom: '80px' }"
		:footer-style="{ textAlign: 'right' }"
		@close="addOnClose"
	>
		<template #extra>
			<a-button style="margin-right: 8px" @click="addOnClose()">取消</a-button>
			<a-button type="primary" @click="saveAuthor()">保存</a-button>
		</template>

		<!--添加的表单-->
		<a-form :model="authorDcInfo" ref="formRef" layout="vertical">
			<!--创作者头像-->
			<a-row :gutter="16">
				<a-col :span="16">
					<a-form-item ref="photo" label="头像:" name="photo">
						<a-upload
							:beforeUpload="beforeUpload"
							:customRequest="onUpload"
							:max-count="1"
							:show-upload-list="true"
							class="avatar-uploader"
							list-type="picture-card"
							name="avatar"
							@change="customRequestMinio">
							<div>
								<PlusOutlined/>
							</div>
						</a-upload>

					</a-form-item>
				</a-col>
			</a-row>


			<!--创作者名称-->
			<a-row :gutter="16">
				<a-col :span="16">
					<a-form-item
						label="创作者名称:"
						name="name"
						:rules="[{ required: true, message: '创作者名称不能为空!' },{min: 1,max:125, message: '您填写的创作者名称过长'}]"
					>
						<a-input v-model:value="authorDcInfo.name" placeholder="请填写创作者名称"/>
					</a-form-item>
				</a-col>
			</a-row>

			<!--创作者状态-->
			<a-row :gutter="16">
				<a-col :span="16">
					<a-form-item ref="status" label="状态:" name="status">
						<a-radio-group v-model:value="authorDcInfo.status">
							<a-radio value="0">禁用</a-radio>
							<a-radio value="1">启用</a-radio>
						</a-radio-group>
					</a-form-item>
				</a-col>
			</a-row>

			<!--创作者简介-->
			<a-row :gutter="16">
				<a-col :span="16">
					<a-form-item ref="remark" label="简介" name="remark">
						<a-textarea :rows="4" v-model:value="authorDcInfo.remark"/>
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>

	</a-drawer>
	<!--  查看详情-->
	<template>
		<div>
			<a-modal v-model:open="this.openn" width="500px" title="创作者信息">
				<br/>
				<a-descriptions :column=1>
					<a-descriptions-item label="头像">
						<a-avatar :size="76" :src=this.authorDcInfoGet.uuidPhoto>
							<template #icon>
								<UserOutlined/>
							</template>
						</a-avatar>
					</a-descriptions-item>
					<a-descriptions-item label="名称">{{ this.authorDcInfoGet.name }}</a-descriptions-item>
					<a-descriptions-item label="状态">
						<span v-if="this.authorDcInfoGet.status==0">禁用</span>
						<span v-if="this.authorDcInfoGet.status==1">启用</span>

					</a-descriptions-item>
					<a-descriptions-item label="创建人">{{ this.authorDcInfoGet.createUser }}</a-descriptions-item>
					<a-descriptions-item label="创建时间">{{ this.authorDcInfoGet.createTime }}</a-descriptions-item>
					<a-descriptions-item label="更新人">{{ this.authorDcInfoGet.updateUser }}</a-descriptions-item>
					<a-descriptions-item label="更新时间">{{ this.authorDcInfoGet.updateTime }}</a-descriptions-item>
					<a-descriptions-item label="简介">{{ this.authorDcInfoGet.remark }}</a-descriptions-item>
				</a-descriptions>
			</a-modal>
		</div>
	</template>
	<!--	<Upload ref="upload"></Upload>-->
</template>


<script>


import author from "@/api/nft/artWork/author";
import {message} from 'ant-design-vue';
import fileApi from "@/api/dev/fileApi";

const key = 'updatable';
export default {

	name: "author",
	data() {
		return {
			//上传文件
			onUpload: true,
			fileList:[{
				uid: '-1',
				name: 'image.png',
				status: 'done',
				url: null,
			}],
			number: 13,
			pagination: 11,

			//抽屉
			updateOpen: false,
			addOpen: false,
			openn: false,
			page: {
				keyword: '',
				status: '',
				pageNo: 1,
				pageSize: 5,
				total: ''
			},
			//列表
			columns: [
				{
					title: '头像',
					dataIndex: 'photo',
					key: 'photo',
				},
				{
					title: '创作者',
					dataIndex: 'name',
					key: 'name',
				},

				{
					title: '状态',
					dataIndex: 'status',
					key: 'status',
				},
				{
					title: '创建时间',
					dataIndex: 'createTime',
					key: 'createTime',
				},
				{
					title: '最后修改',
					dataIndex: 'updateTime',
					key: 'updateTime',
				},
				{
					title: '操作',
					key: 'action'
				}
			],
			//列表查出来的数据
			data: [],
			//创作者添加对象
			authorDcInfo: {
				name: '',
				photo: '',
				uuidPhoto:'',
				status: '',
				remark: '',
			},
			//创作者修改对象
			authorDcInfoUpdate: {
				id: '',
				name: '',
				photo: '',
				uuidPhoto:'',
				remark: '',
			},
			//创作者查看对象
			authorDcInfoGet: {
				name: '',
				photo: '',
				uuidPhoto:'',
				status: '',
				remark: '',
				createUser: '',
				createTime: '',
				updateUser: '',
				updateTime: ''
			}
		}
	},
	mounted() {
		this.query();
	},
	methods: {
		// 事件: 上传文件之前
		beforeUpload(file, fileList) {
			// 显示错误提示(防抖处理)
			const showErrorMsg = debounce(this.$message.error, 20);
			// 验证文件大小
			const isLt1M = file.size / 1024 / 1024 < 2;
			if (!isLt1M) {
				showErrorMsg("文件大小不能超出2MB");
				return false;
			}
			// 验证文件上传数量
			if (fileList.length > 1) {
				showErrorMsg("一次上传的文件数量不能超出1个");
				return false;
			}
			return true;
		},
		//上传创作者头像
		customRequestMinio(data) {
			this.onUpload = true;
			// 转换为file类型
			const fileData = new FormData();
			fileData.append("file", data.file);
			this.authorDcInfo.photo = data.file.name;
			fileApi
				.fileUploadMinioReturnUrl(fileData)
				.then((data) => {
					this.authorDcInfo.uuidPhoto = data;
				});
		},
		//上传创作者头像（修改）
		editCustomRequestMinio(data) {
			this.onUpload = true;
			// 转换为file类型
			const fileData = new FormData();
			fileData.append("file", data.file);
			this.authorDcInfoUpdate.photo = data.file.name;
			fileApi
				.fileUploadMinioReturnUrl(fileData)
				.then((data) => {
					this.authorDcInfoUpdate.uuidPhoto = data;
				});
		},

		//分页查询创作者
		query() {
			debugger
			author.pageList(this.page).then((res) => {
				console.log(res)
				this.data = res.records;
				this.page.pageSize = res.size;
				this.page.total = res.total;
			}).catch((error) => {
				message.error(error);
			})

		},
		//搜索框
		onSearch() {
			this.page.pageNo = 1;
			this.query();
			debugger
		},
		//分页插件
		onChange(pageNo) {
			this.query();
			this.page.pageNo = pageNo;

		},
		//添加创作者
		saveAuthor() {
			debugger
			//通过ref定位到from表单
			let formRef = this.$refs.formRef;
			//触发from表单的验证
			debugger
			formRef.validate().then(() => {
				author.addAuthor(this.authorDcInfo).then((res) => {
						this.query();
					this.addOpen = false;
				}).catch((error) => {
					message.error(error);
				})

			}).catch((error) => {
				message.error('添加失败');
			})
		},
		//抽屉修改取消事件
		onClose() {
			this.updateOpen = false;
			debugger
			this.$refs['formRef'].resetFields();
		},
		//抽屉添弹出事件
		addAuther() {
			this.addOpen = true;
		},
		addOnClose() {
			this.addOpen = false;
			debugger
			this.$refs['formRef'].resetFields();
		},
		//操作(修改)
		update(type) {
			debugger
			author.getAuthor(type).then((res) => {
				debugger
				console.log(res)
				this.authorDcInfoUpdate = res;

				this.fileList[0].url = this.authorDcInfoUpdate.uuidPhoto;
				this.fileList[0].name  = this.authorDcInfoUpdate.photo
			})
			this.updateOpen = true;
		},
		//修改创作者
		editAuthor() {
			debugger
			//通过ref定位到from表单
			let formRef = this.$refs.formRef;
			//触发from表单的验证
			debugger
			formRef.validate().then(() => {
				debugger
				author.editAuthor(this.authorDcInfoUpdate).then((res) => {
						this.query();
				}).catch((error) => {
					message.error(error);
				})
				this.updateOpen = false;
			}).catch((error) => {
				message.error('修改失败');
			})


		},
		//操作(查看)
		getAuthor(type) {
			this.openn = true;
			author.getAuthor(type).then((res) => {
				this.authorDcInfoGet = res;
				debugger
				console.log(res)
			}).catch((error) => {
				message.error(error);
			})

		},
		//操作(删除)
		del(type) {
			author.delAuthor(type).then((res) => {
				debugger
				message.loading({content: '删除中...', key});
				setTimeout(() => {
					message.success({content: '删除成功', key, duration: 2});
					this.query();
				}, 2000);
			}).catch((error) => {
				message.error(error);
			})
		},
		//启用
		start(type) {
			author.startAuthor(type).then((res) => {
				message.loading({content: '启用中...', key});
				setTimeout(() => {
					message.success({content: '操作成功', key, duration: 2});
					this.query();
				}, 2000);

			}).catch((error) => {
				message.error(error);
			})

		},
		//禁用
		dis(type) {
			author.disAuthor(type).then((resp) => {
				message.loading({content: '禁用中...', key});
				setTimeout(() => {
					message.success({content: '操作成功', key, duration: 2});
					this.query();
				}, 2000);

			}).catch((error) => {
				message.error(error);
			})
		}
	},

}


</script>

<style scoped>

</style>
